<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        /* #box {
            position: relative;
            right: 0;
        } */

        #box {
            height: 6000px;
            width: 100px;
            position: absolute;
            right: 0;
            background-color: blue;
            /* padding: 10px;
            border-radius: 10px;
            background-color: lime;
            margin-bottom: 10px;
            width: 300px;
            float: right; */
            /* position: absolute; */
            /* right: 0; */
        }

        #xx {
            left: 200px;
            position: fixed;
            top: 280px;
            /* width: 50px; */
        }

        #xx a {
            border: 1px solid #b0b0b0;
            width: 45px;
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: gray;
            text-decoration: none;
        }

        #xx a.active {
            background-color: red;
            color: white;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <!-- <div id="xx" style="display: none">

    </div> -->
    <div id="xx" style="display: none">
        <a href="#special" class="active">
            特价
        </a>
        <a href="#drink">
            自饮
        </a>
        <a href="#gift">
            送礼
        </a>
        <a href="#tea">
            茶具
        </a>
        <a href="#hot">
            热评
        </a>
    </div>

    <script src="../vendor/jquery-3.6.0.js"></script>
    <script>
        // for (let i = 0; i < 1000; i++) {
        //     const div = document.createElement("div");
        //     div.innerHTML = i;
        //     box.appendChild(div);
        // }
        //window提供，监听窗口的滚动

        $('#xx>a').mouseenter(function () {
            $(this).addClass('active').siblings().removeClass('active')
            // console.log(this.innerHTML)
            // console.log(this)

        })

        onscroll = function () {
            // console.log("onscroll");
            //滚动的距离
            const y = document.documentElement.scrollTop || document.body.scrollTop;
            console.log("y:", y);

            if (y > 4000) {
                // xx.style.display = '';
                $('#xx').fadeIn('slow')
            } else {
                // xx.style.display = "none";
                $('#xx').fadeOut('slow')
            }
            // xx.style.display = y > 3000 ? "" : "none";

            // $('#xx').fadeIn('slow')
            // $('#xx').fadeOut('slow')

        };
        if (xx.style.display == '') {
            $('#xx').fadeIn('slow')
        } else {
            $('#xx').fadeOut('slow')
        }

    </script>
</body>

</html>